import React, { Component } from 'react'
//默认导出只能导出一次

// export class Details extends Component {
//     state = { data: {} };
//     componentDidMount() {
//         fetch('http://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312')
//             .then(res => res.json())
//             .then(res => {
//                 console.log(res);
//                 this.setState({ data: res.data })
//             })
//     }
//     render() {
//         return (
//             <h1>
//                 {this.state.data.title}
//             </h1>
//         )
//     }
// }

// export default class Hoc extends Component {
//     state = { data: [] };
//     componentDidMount() {
//         fetch('https://cnodejs.org/api/v1/topics')
//             .then(res => res.json())
//             .then(res => {
//                 console.log(res);
//                 this.setState({ data: res.data.slice(0, 3) })
//             })
//     }
//     render() {
//         return (
//             <div>
//                 {/* <Details /> */}
//                 {
//                     this.state.data.map(item => <li key={item.id}>{item.title}</li>)
//                 }

//             </div>
//         )
//     }
// }

const withFetch = (Com, url) => {
    return class WrapCom extends Component {
        state = { data: [] };//数组；传参数是null和{}输出前都要判空
        componentDidMount() {
            fetch(url)
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    this.setState({ data: res.data })
                })
        }
        render() {
            return <Com data={this.state.data} />
        }
    }
}
class Hoc extends Component {
    render() {
        return (
            <div>
                {/* <Details /> */}
                {
                    this.props.data?.map(item => <li key={item.id}>{item.title}</li>)
                }

            </div>
        )
    }
}
const Details = props => <h1>{props.data.title}</h1>
// class Details extends Component {

//     render() {
//         return (
//             <h1>
//                 {this.props.data.title}
//             </h1>
//         )
//     }
// }

const NewHoc = withFetch(Hoc, 'https://cnodejs.org/api/v1/topics');
export default NewHoc;
export const NewDetails = withFetch(Details, 'http://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312');



